<template>
  <div class="center-bottom-left">
    <div class="data-title">
      <comp-title v-if="dataSet.centerBottom" :text="dataSet.centerBottom.leftData.title"
        ref="compTitle"></comp-title>
    </div>
    <div class="data-content">
      <ul class="real-time-list">
        <li class="real-time-item"
          v-for="(cube, index) in accessData"
          :key="index">
          <cube :cubeData='cube'
            :makeUp='true'
            :ref="`cube${index}`"></cube>
        </li>
      </ul>
      <div class="table-box"
        ref="cbl">
        <div class="table-box-scroll hy-35J">
          <table>
            <thead>
              <tr ref="tableTitle">
                <th v-for="(c, i) in columns"
                  :key="i">
                  <span>{{c.name}}</span>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(t, j) in tableData"
                ref="tableContent"
                :key="j">
                <td v-for="(c, k) in columns"
                  :key="k">
                  <span
                    :class="[columns[k].props === 'status'?formatCellStyle(t[columns[k].props]):'']">{{columns[k].props === 'status'? formatCell(t[columns[k].props]) : t[columns[k].props]}}</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import CompTitle from '@/components/common/compTitle.vue'
import Cube from '@/components/common/cube.vue'
import { mapState } from 'vuex'
// https://cn.vuejs.org/v2/style-guide/#组件-实例的选项的顺序-推荐
export default {
  name: 'CenterBottomLeft',
  components: {
    CompTitle,
    Cube
  },
  model: {},
  props: {},
  data() {
    return {
      columns: [
        {
          name: '用数部门',
          props: 'dept'
        },
        {
          name: '调用事项',
          props: 'usefor'
        },
        {
          name: '库名',
          props: 'libName'
        },
        {
          name: '供数部门',
          props: 'supplyDept'
        },
        {
          name: '调用次数',
          props: 'times'
        },
        {
          name: '状态',
          props: 'status'
        }
      ]
    }
  },
  computed: {
    formatCell() {
      return s => {
        s = Number(s)
        switch (s) {
          case 0:
            return '失败'
            break
          case 1:
            return '正常'
            break
          case -1:
            return '异常'
            break
        }
      }
    },
    formatCellStyle() {
      return s => {
        s = Number(s)
        switch (s) {
          case 0:
            return 'failed'
            break
          case 1:
            return 'normal'
            break
          case -1:
            return 'unusual'
            break
        }
      }
    },
    ...mapState(['dataSet']),
    accessData() {
      if(this.dataSet.centerBottom){
        return this.dataSet.centerBottom.leftData.accessData
      } else {
        return []
      }
    },
    tableData() {
      if(this.dataSet.centerBottom){
        return this.dataSet.centerBottom.leftData.tableData
      } else {
        return []
      }
    }
  },
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    init() {
      let tl = new TimelineMax({})
      tl.add(this.$refs.compTitle.init(), 0)
      for (let i = 0; i < this.accessData.length; i++) {
        tl.add(this.$refs[`cube${i}`][0].init(), '-=0.5')
      }
      let cbl = TweenMax.from(this.$refs.cbl, 0.5, { opacity: 0, height: 0 })
      tl.add(cbl, '-=0.4')
      let tableTitle = TweenMax.from(this.$refs.tableTitle, 0.5, {
        transform: 'scaleY(0)',
        opacity: 0,
        ease: Back.easeIn
      })
      tl.add(tableTitle, '-=0.8')
      let tableContentlist = this.$refs.tableContent
      let len = tableContentlist.length
      let lines1 = {}
      for (let i = 0; i < len; i++) {
        lines1[`line${i + 1}`] = TweenMax.from(tableContentlist[i], 0.5, {
          transform: 'scaleY(0)',
          opacity: 0,
          ease: Back.easeIn
        })
      }

      for (let i = 0; i < len; i++) {
        tl.add(lines1[`line${i + 1}`], '-=0.3')
      }
      return tl
    }
  }
}
</script>
<style lang="scss" scoped>
.center-bottom-left {
  height: 100%;

  color: #fff;

  font-family: Arial, Helvetica, sans-serif;
  .data-title {
    width: 420px;
    margin: 6px 0 12px 0;
  }
  .data-content {
    height: calc(100% - 48px);

    .real-time-list {
      display: flex;
      align-items: center;
      justify-content: space-between;

      margin-bottom: 18px;
    }

    .table-box {
      position: relative;

      height: calc(100% - 68px);
      padding-top: 4px;
      border-top: 1px solid #035ef01a;

      background: linear-gradient(0deg, #035ef01a, transparent),
        linear-gradient(transparent, #2af9fa1a, transparent) no-repeat 583px;
      font-weight: bold;
      font-size: 14px;
      &:before,
      &:after {
        display: block;

        position: absolute;
        top: -1px;
        left: 0;

        width: 150px;
        height: 1px;

        background-color: #035ef0;

        content: '';
      }
      .table-box-scroll {
        overflow: auto;

        width: 100%;
        height: 100%;
        &::-webkit-scrollbar {
          width: 0;
        }
      }
      table {
        width: 100%;
        tr {
          transform-origin: center top;
        }
        thead{
          th{
            color: #fff;
          }
        }
        th,
        td {
          text-align: center;
        }
        th span {
          display: inline-block;

          width: 100%;
          padding: 0 5px;

          background-color: #035ef01a;

          white-space: nowrap;
        }
        tbody {
          color: rgba(0, 247, 250, .6);
          tr {
            height: 32px;

            transform-origin: center top;
            &:nth-child(2n) {
              background-color: #035ef01a;
              span {
                display: inline-block;

                width: 100%;
              }
            }
            td:nth-child(3) {
              white-space: nowrap;
            }
            span {
              padding: 0 5px;
            }
          }
          .normal {
            color: #28a1ffcc;
          }
          .failed {
            color: #ed3445cc;
          }
          .unusual {
            color: #faa23fcc;
          }
        }
      }
    }
  }
}
</style>